import cs from 'classnames'
import Image from 'next/image'
import React, { useContext, useEffect, useState } from 'react'

import { EnumsRes, Violation } from '@/api/interface'
import { Enums } from '@/api/modules'
import complaint from '@/assets/images/complaint.png'
import complaintActive from '@/assets/images/complaint_active.png'
import confirm from '@/assets/images/confirm.png'
import confirmActive from '@/assets/images/confirm_active.png'
// import personal from '@/assets/images/personal.png'
import setupBgFirst from '@/assets/images/setup2_first.png'
// import setupBgActive from '@/assets/images/setup1_active.png'
import setupBgFirstActive from '@/assets/images/setup2_first_active.png'
import setupBgLast from '@/assets/images/setup2_last.png'
import setupBgLastActive from '@/assets/images/setup2_last_active.png'
// import About from '@/components/EntityForm/About'
import ComplaintDetails from '@/components/EntityForm/ComplaintDetails'
import ReviewAndConfirm from '@/components/EntityForm/ReviewAndConfirm'
import TankYou from '@/components/EntityForm/TankYou'
import EntityLayout from '@/components/LayoutEntity'
import { GlobalContext } from '@/context'
import useLocale from '@/utils/useLocale'

import locale from './locale'
import styles from './styles/index.module.less'

function EntityForm() {
  const t = useLocale(locale)
  const { lang } = useContext(GlobalContext)

  useEffect(() => {
    getEnums()
  }, [])

  const [enums, setEnums] = useState<{ [key: string]: EnumsRes[] }>({
    ViolationTypeA: [],
    ViolationTypeB: [],
    Nationality: [],
    Complainant: [],
    ViolatorOrWitness: [],
  })

  const getEnums = async () => {
    const enumData = await Promise.all([
      Enums({ type: 'ViolationTypeAEnums' }),
      Enums({ type: 'ViolationTypeBEnums' }),
      Enums({ type: 'NationalityEnums' }),
      Enums({ type: 'ComplainantEnums' }),
      Enums({ type: 'ViolatorOrWitnessEnums' }),
    ])
    setEnums({
      ViolationTypeA: enumData[0].data,
      ViolationTypeB: enumData[1].data,
      Nationality: enumData[2].data,
      Complainant: enumData[3].data,
      ViolatorOrWitness: enumData[4].data,
    })
  }

  const [setup, setSetup] = useState(1)

  useEffect(() => {
    window.scrollTo({ top: 0 })
  }, [setup])

  const [violation, setViolation] = useState<Partial<Violation>>({ supportEntities: [] })

  const setupList = [
    // { icon: personal, icon_active: personal, title: t['form.setup.about'] },
    { icon: complaint, icon_active: complaintActive, title: t['form.setup.complaint'] },
    { icon: confirm, icon_active: confirmActive, title: t['form.setup.confirm'] },
  ]

  const FormComponents: { [key: number]: JSX.Element } = {
    // 1: <About t={t} setSetup={setSetup} />,
    1: (
      <ComplaintDetails
        t={t}
        lang={lang}
        enums={enums}
        setSetup={setSetup}
        violation={violation}
        setViolation={setViolation}
      />
    ),
    2: (
      <ReviewAndConfirm t={t} lang={lang} enums={enums} setSetup={setSetup} violation={violation} />
    ),
    3: <TankYou t={t} />,
  }

  return (
    <section className={cs(styles['form-entity'], lang === 'en-US' ? '' : styles['form-rtl'])}>
      <main className={styles['form-main']}>
        {setup < 3 && (
          <div className={styles['form-setup']}>
            {setupList.map((item, index) => {
              const isComplete = index < setup
              const isActive = index === setup - 1
              const isLast = index === setupList.length - 1

              let setupBackground
              if (!isActive) setupBackground = isLast ? setupBgLast : setupBgFirst
              else setupBackground = isLast ? setupBgLastActive : setupBgFirstActive

              return (
                <React.Fragment key={item.title}>
                  <div className={styles['setup-item']}>
                    <Image src={setupBackground} className={styles['setup-bg']} alt="bg" />
                    <Image
                      src={isComplete ? item.icon_active : item.icon}
                      className={styles['setup-icon']}
                      alt="icon"
                    />
                    <span
                      className={`${styles['setup-title']} ${
                        isComplete ? styles['setup-title-complete'] : ''
                      }`}
                    >
                      {item.title}
                    </span>
                  </div>
                </React.Fragment>
              )
            })}
          </div>
        )}
        <div className={styles['form-content']} key={setup}>
          {FormComponents[setup]}
        </div>
      </main>
    </section>
  )
}

export default EntityForm

EntityForm.getLayout = function getLayout(page: React.ReactNode) {
  return <EntityLayout>{page}</EntityLayout>
}
